<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style media="screen" title="currentStyle" type="text/css">
            @import "combo/jquery.multiselect.css";
            @import "combo/jquery.multiselect.filter.css";
            @import "combo/prettify.css";
            @import "combo/jquery-ui.css";
            @import "combo/style2.css";
        </style>
        <script src="combo/jquery(1).js"></script>
        <script src="combo/jquery-ui.min.js"></script>
        <script src="combo/prettify.js"></script>
        <script src="combo/jquery.multiselect.js"></script>
        <script src="combo/jquery.multiselect.filter.js"></script>
    </head>
    <body>
            <p class="validateTips">All form fields are required.</p>
            <form>
                <fieldset>
                   <p>
		<select multiple="multiple" style="width:370px">
		<option value="red">Red</option>
		<option value="green">Green</option>
		<option value="blue">Blue</option>
		<option value="orange">Orange</option>
		<option value="purple">Purple</option>
		<option value="yellow">Yellow</option>
		<option value="brown">Brown</option>
		<option value="black">Black</option>
		</select>
	</p>
                    
                    
                    
                    <p>

                    <select multiple="multiple" style="width:370px">
                 
		<optgroup label="test">
			<option value="red">Red</option>
			<option value="green">Green</option>
			<option value="blue">Blue</option>
		</optgroup>
		<optgroup label="foo">
			<option value="orange">Orange</option>
			<option value="purple">Purple</option>
			<option value="yellow">Yellow</option>
			<option value="brown">Brown</option>
			<option value="black">Black</option>
		</optgroup>
                    </select>
                </p>
                </fieldset>
            </form>

        
               
        
        <script type="text/javascript">
        
       $("select").multiselect().multiselectfilter({
    filter: function(event, matches){
        if( !matches.length ){
            // do something
        }
    }
});
$("select").multiselect().multiselectfilter({
    filter: function(event, matches){

        // find the first matching checkbox
        var first_match = $( matches[0] );
    }
});
$("select").bind("multiselectfilterfilter", function(event, matches){
    // do something
});
    
    
                $(document).ready(function() {
                $("select").multiselect().multiselectfilter();

                $( "#package-dialog-form" ).dialog({
                    autoOpen: false,
                    height: 360,
                    width: 740,
                    modal: true,
                    buttons: {
                        "Create": function() {
                            var bValid = true;
                            allFields.removeClass( "ui-state-error" );
                        },
                        Cancel: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });

                $( "#create-package" ).button().click(function() {
                    $( "#package-dialog-form" ).dialog( "open" );
                });
            });
        </script>
    </body>
</html>